<template>
  <div>
    <vue-draggable-resizable @dragging="onDrag" @resizing="onResize" snap="true" :snap-tolerance="20" v-bind:style="{'background': 'url('+imagesDir+') no-repeat center center'}">
<!--      <img v-bind:src="imagesDir"/>-->
    </vue-draggable-resizable>
  </div>
</template>

<script>
  import 'vue-draggable-resizable/dist/VueDraggableResizable.css'

  export default {
    name: 'ImageDraggableResizable',
    props: {
      name: {
        type: String,
        default: '',

      },
      imagesDir: {
        type: String,
        // required: true
      },



    },
    data: function() {
      return {
        width: 0,
        height: 0,
        x: 0,
        y: 0
      }
    },
    mounted(){
        console.log(this.imagesDir)
    },
    methods: {
      onResize: function(x, y, width, height) {
        this.x = x
        this.y = y
        this.width = width
        this.height = height
      },
      onDrag: function(x, y) {
        this.x = x
        this.y = y
      }
    }
  }
</script>

<style scoped>

  .vdr {

    border: 1px solid #000;
  }
</style>